<template>
	<el-dialog v-model="dialogVisible" title="批量升级" width="430" class="qc-custom-dialog">
		<el-scrollbar>
			<div class="code-info">
				<el-form ref="updateRef" :model="ruleForm" :rules="rules" label-width="80px" class="edit-form-wrap">
					<el-form-item label="电桩编码" class="bottom-wrap">
						<el-input v-model.trim="ruleForm.equipmentCode" placeholder="例:升级河南可以填:41*" maxlength="14"
							clearable />
					</el-form-item>
					<el-form-item label="DTU" class="bottom-wrap">
						<el-input v-model.trim="ruleForm.dtu" placeholder="例:S38*。S279,288" maxlength="14" clearable />
					</el-form-item>
					<el-form-item label="主控" class="bottom-wrap">
						<el-input v-model.trim="ruleForm.masterControl" placeholder="范围査询逗号分割,小在前、大在后" maxlength="14"
							clearable />
					</el-form-item>
					<el-form-item label="版本信息" class="bottom-wrap">
						<el-input v-model.trim="ruleForm.equVersion" placeholder="单体桩参数:0*,分体桩:1*,例:1032*"
							maxlength="14" clearable />
					</el-form-item>
					<el-form-item label="升级版本" prop="updateVersion">
						<qc-select :value="ruleForm.updateVersion" :remote="true" :filterable="true"
							:options="optionsS.updateVersion" placeholder="请选择升级版本" @change="handleVersion">
						</qc-select>
					</el-form-item>
				</el-form>
			</div>
		</el-scrollbar>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="hide">取消</el-button>
				<el-button type="primary" v-btnAntiShake="onSubmit"> 保存 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="dialog-price">
	import { FormInstance, FormRules } from 'element-plus';
	import { getChargingPileType, remoteUpdateBath } from '@/service/apis/pile';

	let dialogVisible = ref(false);
	const updateRef = ref<FormInstance>();

	const optionsS = reactive({
		updateVersion: [] as any,
	});

	const ruleForm = reactive({
		id: '',
		equipmentCode: '',
		dtu: '',
		masterControl: '',
		equVersion: '',
		updateVersion: undefined as any,
	});

	const rules = reactive<FormRules>({
		updateVersion: [
			{ required: true, message: '请选择升级版本', trigger: ['blur', 'change'] },
		],
	});

	const handleVersion = (e : any) => {
		ruleForm.updateVersion = e;
	};

	const getVersion = (type : any) => {
		getChargingPileType({ chargingPileType: 1 }).then((res : any) => {
			optionsS.updateVersion = res || [];
		});
	};

	// 显示弹框
	const show = (row : any) => {
		ruleForm.id = row.id;
		ruleForm.equipmentCode = row.equipmentCode;
		ruleForm.dtu = undefined as any;
		ruleForm.masterControl = undefined as any;
		ruleForm.equVersion = undefined as any;
		ruleForm.updateVersion = undefined as any;
		getVersion(row.type);
		dialogVisible.value = true;
	};
	// 关闭弹框
	const hide = () => {
		dialogVisible.value = false;
	};

	const onSubmit = async () => {
		if (!updateRef.value) return;
		await updateRef.value.validate((valid : any, fields : any) => {
			if (valid) {
				const form = {
					// id: ruleForm.id,
					equipmentCode: ruleForm.equipmentCode,
					dtu: ruleForm.dtu,
					masterControl: ruleForm.masterControl,
					equVersion: ruleForm.equVersion,
					updateVersion: ruleForm.updateVersion,
				};
				ElMessageBox.confirm('升级过程一旦开始不能停止，请检查好参数防止误升级。确定执行此操作？', '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}).then((row) => {
					if (row == 'confirm') {
						remoteUpdateBath(form).then((res : any) => {
							ElMessage({
								showClose: true,
								message: '远程升级指令下发成功，请稍后查看电桩状态！',
								type: 'success',
							});
							hide();
						});
					}
				});

			} else {
				console.log('error submit!', fields);
			}
		});
	};

	defineExpose({
		show,
	});
</script>

<style lang="scss" scoped>
	.code-info {
		max-height: 50vh;
	}
</style>